<script setup>
import { feedbackStatus } from "@/utils/globleVar"
import { reactive, ref, watch } from "vue"
    const props = defineProps({
        feedbackList: {
            require:true,
            type:Object
        },
        isFeedbacktUser:{
            Require:true,
            type:Boolean
        },
        showAudit:{
            Require:true,
            type:Boolean
        }
    })
    const feedbacks = reactive({
        data:[]
    })
    const pageInfo = reactive({
        data:{}
    })
    watch(props.feedbackList,(newVal)=>{
        feedbacks.data = newVal.feedbacks
        pageInfo.data = newVal.pageInfo
    })
    const emits = defineEmits()
    const onDel = (feedbackId)=>{
        emits('onDel',feedbackId)
    }
    const onEdit = (feedbackId)=>{
        emits('onEdit',feedbackId)
    }
    const updataStutus = (feedbackId,status)=>{
        emits('onUpdateStatus',feedbackId,status)
    }
    const getMore = (page)=>{
        emits('getMore',page+1)
    }
    const headImgSize = 50
</script>
<template>
    <ul
    class="feedback-list"
    style="overflow: auto"
    v-infinite-scroll="getMore(feedbackList.pageInfo)" 
    :infinite-scroll-distance="20" >
        <li 
        class="feedbacks"
        v-for="feedback in feedbacks.data" :key="feedback.id">
        <div >
            <div class="item">
                <div class="head">
                    <el-badge 
                    v-if="feedback.status === feedbackStatus.unprocessed"
                    value="未处理">
                        <el-avatar 
                        class="head-left"
                        :size="headImgSize" 
                        :src="feedback.user.avatar" />
                    </el-badge>
                    <el-badge 
                    color="blue"
                    v-if="feedback.status === feedbackStatus.processing"
                    value="处理中">
                        <el-avatar 
                        class=" head-left"
                        :size="headImgSize" 
                        :src="feedback.user.avatar" />
                    </el-badge>
                    <el-badge
                    color="green"
                    v-if="feedback.status === feedbackStatus.processed" 
                    value="已处理">
                        <el-avatar 
                        class="head-left"
                        :size="headImgSize" 
                        :src="feedback.user.avatar" />
                    </el-badge>
                    <div class="head-right">
                        <h5 class="name">反馈人：{{ feedback.contactName }}</h5>
                        <span class="time">{{ feedback.createdAt }}</span>
                    </div>
            </div>
                <div class="content">反馈内容：{{ feedback.content }}</div>
                <div class="phone">联系电话：{{ feedback.contactPhone}}</div>
                <div class="imgs" >
                    <img :src="img.image_url" v-for="img in feedback.images" :key="img.id">
                </div>
                <div class="button-box">
                    <el-button
                    class="button del"
                    @click="onDel(feedback.id)"
                    v-show="isFeedbacktUser">删除</el-button>
                    <el-button
                    class="button edit"
                    @click="onEdit(feedback)"
                    v-show="isFeedbacktUser">编辑</el-button>
                    <el-button 
                    class="button handle"
                    type="primary"
                    v-show="showAudit && feedback.status === feedbackStatus.unprocessed"
                    @click="updataStutus(feedback.id,feedbackStatus.processing)">
                    去处理</el-button>
                    <el-button
                    class="button handled"
                    v-show="showAudit && feedback.status === feedbackStatus.processing"
                    @click="updataStutus(feedback.id,feedbackStatus.processed)"
                    >已处理</el-button>
                </div>
            </div>
        </div>
        </li>
    </ul>
</template>

<style lang="scss" scoped>
.feedback-list{
list-style: none;
justify-content: space-around;
    .feedbacks{ 
    width:90%;
    margin: 20px ;
    border-bottom-style:solid;
    border-color:var(--el-color-username);
    //background-color: rgb(255, 255, 255);
    border-radius: 10px;
       .item{
        //width:90%;
        margin: 20px ;
        border-bottom-style:solid;
        border-color:var(--el-color-username);
        //background-color: rgb(255, 255, 255);
        border-radius: 10px;
        .head{
            margin-top: 10px;
            display: flex;
            align-items: flex-start;
            justify-content: start;
            .head-left{
                margin: 16px 20px -15px 20px;
            }
            .head-right{
               margin-top: 20px;
                .name{
                    margin: -2px 0px 10px;
                }
                .time{
                    margin: -2px 0px 10px;
                    font-size: 15px;
                    color: rgb(175, 175, 175);
                }
            }
        }
        .content{
            margin: 10px 20px;
        }
        .phone{
            margin: 10px 20px;
        }
        .imgs{
            margin: 5px 20px;
            display: flex;
            flex-wrap: wrap;
            flex-direction:  row;
            img{
            width: 200px;
            height: 200px;
            display: inline-block;
            }
        }
        .button-box{
        display: flex;
        align-items: center;
        justify-content: end;
        margin: 20px;    
            .button{
                border-radius: 20px;
            }
        
        }
       }
    }
}
</style>